<template>
  <div class="nav-child-container" v-show="navHomeChecked.father > -1">
    <!-- 点击父栏切换选中的 index 为 -1 -->
    <span
      class="nav-child-item"
      :class="{ checked: navHomeChecked.child === -1 }"
      @click="childCateAll"
      >全部</span
    >
    <template v-for="(item, i) in sliceCate">
      <span
        class="nav-child-item"
        :key="i + 'cateChild'"
        :class="{ checked: navHomeChecked.child === i }"
        @click="homeCateChange(item[i].tag_id, i)"
        >{{ item[i].tag_name }}</span
      >
    </template>

    <span class="nav-child-item" @click="showMore" v-if="!isShowMore"
      >展开 <i class="el-icon-caret-bottom"></i>
    </span>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      isShowMore: window.sessionStorage.getItem('cateIsShowMore') || false
    }
  },
  mounted() {},
  computed: {
    ...mapState(['navHomeChecked', 'cateChild', 'cateList']),
    sliceCate() {
      const obj = this.cateChild[this.navHomeChecked.father]
      if (this.cateChild.length > 7 && obj) {
        // 对象转数组
        let arr = []
        Object.keys(obj).forEach((v) => {
          let o = {}
          o[v] = obj[v]
          arr.push(o)
        })

        if (!this.isShowMore) {
          // console.log('子分类首位',arr.slice(0, 9)[0][0])
          return arr.slice(0, 9)
        }
        return arr
      }
      return []
    }
  },
  methods: {
    ...mapMutations(['updateNavHomeChecked']),
    // 点击子分类
    homeCateChange(tag_id, index) {
      this.updateNavHomeChecked({
        father: this.navHomeChecked.father,
        child: index
      })
      // 对象形式存储
      window.sessionStorage.setItem(
        'nav-home-checked',
        JSON.stringify(this.navHomeChecked)
      )
      this.$bus.$emit('homeCateChange', tag_id)
    },
    // 点击其它子分类 '全部'
    childCateAll() {
      this.updateNavHomeChecked({
        father: this.navHomeChecked.father,
        child: -1
      })
      window.sessionStorage.setItem(
        'nav-home-checked',
        JSON.stringify(this.navHomeChecked)
      )
      this.$bus.$emit(
        'homeCateChange',
        this.cateList[this.navHomeChecked.father].category_id // 获取父分类栏的id
      )
    },
    showMore() {
      this.isShowMore = true
      window.sessionStorage.setItem('cateIsShowMore', true)
    }
  },
  watch: {
    navHomeChecked: function (newArr, oldArr) {
      // console.log(newArr, oldArr)
      // 如果已经触发显示更多，直接 return
      if (this.isShowMore) return
      // 子栏的 id > 8,显示更多
      if (newArr.child > 8) {
        this.isShowMore = true
      } else {
        this.isShowMore = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.nav-child-container {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0.5rem;

  .nav-child-item {
    background-color: #fff;
    border-radius: 1rem;
    font-size: 1.1rem;
    color: #8a9aa9;
    padding: 4px 8px;
    margin: 0 1rem 1rem 0;
    cursor: pointer;
  }

  .nav-child-item:hover {
    color: var(--hover-color);
  }

  .checked {
    color: #fff !important;
    background-color: #007fff;
  }
}
</style>
